import { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { ColumnsType } from 'antd/es/table'
import { SearchOutlined } from '@ant-design/icons'
import { Button, Col, Form, Input, Modal, Row, Space, Table } from 'antd'

import Units from './Units'
import Creator, { IData, IType } from './Creator'
import { enterpriseAPI } from '@/apis'

// const defaultPageConfig = {
//   page: 1,
//   pageSize: 10,
// }

const Index = () => {
  const [form] = Form.useForm()
  // const [total, setTotal] = useState(0)
  // const [pageConfig, setPageConfig] = useState(defaultPageConfig)
  const [loading, setLoading] = useState(false)
  const [list, setList] = useState([])
  const [facilitiesOpen, setFacilitiesOpen] = useState(false)
  const [creatorOpen, setCreatorOpen] = useState(false)
  const [activeItem, setActiveItem] = useState(null)
  const [type, setType] = useState(IType.UNKNOWN)
  const navigate = useNavigate()
  const location = useLocation()

  const columns: ColumnsType<IData> = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '企业名称',
      dataIndex: 'enterprise_name',
      key: 'enterprise_name',
      render: (value, record) => {
        return <a onClick={() => onDetailHandle(record?.id)}>{value}</a>
      },
    },
    {
      title: '地址',
      dataIndex: 'enterpriseAddress',
      key: 'enterpriseAddress',
    },
    {
      title: '消防画像',
      dataIndex: 'fireFightingProfile',
      key: 'fireFightingProfile',
    },

    {
      title: '消防设施',
      dataIndex: 'fireProtectionFacilities',
      key: 'fireProtectionFacilities',
      render: (value) => {
        return (
          <a
            onClick={() => {
              setFacilitiesOpen(true)
              setActiveItem(value)
            }}
          >
            {value?.length}
          </a>
        )
      },
    },
    {
      title: '消防演练',
      dataIndex: 'fireDrill',
      key: 'fireDrill',
    },
    {
      title: '培训考试',
      dataIndex: 'trainingExamination',
      key: 'trainingExamination',
    },
    {
      title: '单位人员',
      dataIndex: 'personnel',
      key: 'personnel',
    },
    {
      title: '单位车辆',
      dataIndex: 'vehicle',
      key: 'vehicle',
    },

    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      fixed: 'right',
      width: 200,
      render: (_, record) => {
        return (
          <Space wrap>
            <Button
              size="small"
              type="link"
              onClick={() => {
                setType(IType.VIEW)
                setActiveItem(record)
                setCreatorOpen(true)
              }}
            >
              详情
            </Button>
            <Button
              size="small"
              type="link"
              onClick={() => {
                setType(IType.EDIT)
                setActiveItem(record)
                setCreatorOpen(true)
              }}
            >
              修改
            </Button>
          </Space>
        )
      },
    },
  ]

  const fetchData = () => {
    setLoading(true)
    enterpriseAPI
      .getEnterpriseData({
        key: location.pathname,
        id: 0,
      })
      .then((res) => {
        setLoading(false)
        setList(res.data)
      })
      .catch(() => {
        setLoading(false)
      })
  }

  const onDetailHandle = (id) => {
    window.open(`http://139.196.21.184:8989/#/enterprise/desc/${id}`)
  }

  const onConfirmHandle = (values) => {
    const { id, ...value } = values
    enterpriseAPI
      .setEnterpriseData({
        key: location.pathname,
        id: id,
        value: JSON.stringify(value),
      })
      .then(() => {
        setCreatorOpen(false)
        fetchData()
      })
  }

  useEffect(() => {
    fetchData()
  }, [])

  return (
    <>
      <Form form={form} onFinish={fetchData}>
        <Row gutter={[12, 12]}>
          <Col>
            <Form.Item name="enterprise_name" label="企业名称" style={{ width: 300 }}>
              <Input placeholder="请输入企业名称" allowClear></Input>
            </Form.Item>
          </Col>
          <Col>
            <Form.Item>
              <Button icon={<SearchOutlined />} htmlType="submit" type="primary">
                搜索
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <Table
        loading={loading}
        scroll={{
          x: 1200,
        }}
        rowKey={(_) => _.id}
        dataSource={list}
        columns={columns}
        // pagination={{
        //   // total: total,
        //   pageSize: pageConfig.pageSize,
        //   current: pageConfig.page,
        //   showSizeChanger: true,
        //   onChange: onPaginationChangeHandle,
        //   showTotal: (total) => `总${total}条记录`,
        // }}
      />

      <Modal
        width={750}
        title="消防设置"
        open={facilitiesOpen}
        destroyOnClose
        onCancel={() => setFacilitiesOpen(false)}
        footer={null}
      >
        <Units id={activeItem?.id} />
      </Modal>

      <Modal
        open={creatorOpen}
        title={
          {
            [IType.EDIT]: '编辑',
            [IType.VIEW]: '查看',
          }[type]
        }
        destroyOnClose
        onCancel={() => setCreatorOpen(false)}
        footer={IType.VIEW == type ? null : undefined}
        okButtonProps={{
          htmlType: 'submit',
          form: 'creatorForm',
        }}
      >
        <Creator data={activeItem} disabled={type == IType.VIEW} onConfirm={onConfirmHandle} />
      </Modal>
    </>
  )
}

export default Index
